<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/heyui"></script>
    <link rel="stylesheet" href="/scripts/heyui/css/heyui.blue.theme.css">
    <link rel="stylesheet" href="/styles/global.css">
</head>

<body>
    <div class="page-body">
        <div id="app" class="h-panel">
            <div class="h-panel-bar">
                <span class="h-panel-title">用户列表编辑</span>
                <span class="h-panel-right"><a>更多</a></span>
            </div>
            <div class="h-panel-body">
                <h-form v-width="500" :label-width="110" :mode="mode" :model="data" :rules="validationRules" ref="form"
                    :top="0.2" showErrorTip>
                    <h-form-item single>
                        <h-switch-list :datas="modeParam" v-model="mode" :small="true"></h-switch-list>
                    </h-form-item>
                    <h-form-item label="Input" prop="inputData">
                        <input type="text" v-model="data.inputData" placeholder="只能输入15，限制输入30个字" v-wordlimit='30' />
                        <template slot="error" slot-scope="props">
                            <!-- *type*: base, combine, async -->
                            <span class="link" v-if="props.type == 'async'" @click="open">+++++++自定义的错误提示+++++++</span>
                        </template>
                    </h-form-item>
                    <h-form-item label="Readonly" readonly>只读数据</h-form-item>

                    <h-form-item label="Amount" :required="true" single>
                        <div class="h-input-group">
                            <div class="h-input-addon">
                                <h-select v-model="data.select1Data" :datas="param1" :no-border="true"
                                    :null-option="false"></h-select>
                            </div>
                            <h-form-item prop="money.minData" label="起始金额" :show-label="false">
                                <input type="text" placeholder="起始金额" v-model="data.money.minData" />
                            </h-form-item>
                            <span class="h-input-addon">-</span>
                            <h-form-item prop="money.maxData" label="结束金额" :show-label="false">
                                <input type="text" placeholder="结束金额" v-model="data.money.maxData" />
                            </h-form-item>
                            <span class="h-input-addon">K</span>
                        </div>
                    </h-form-item>

                    <h-form-item label="h-select" prop="select2Data">
                        <h-select dict="simple"></h-select>
                    </h-form-item>

                    <h-form-item label="Tags" prop="taginputsData">
                        <h-tag-input v-model="data.taginputsData"></h-tag-input>
                    </h-form-item>

                    <h-form-item label="Multiple" prop="select3Data">
                        <h-select v-model="data.select3Data" dict="simple" :multiple="true"></h-select>
                    </h-form-item>

                    <h-form-item label="Date" ref="datapicker" prop="dateData">
                        <h-date-picker v-model="data.dateData"></h-date-picker>
                    </h-form-item>

                    <h-form-item label="Score" prop="rateData">
                        <h-rate v-model="data.rateData" :show-text="true"></h-rate>
                    </h-form-item>

                    <h-form-item label="Textarea" :single="true" prop="textareaData">
                        <textarea rows="3" v-autosize v-wordcount="50" v-model="data.textareaData"></textarea>
                    </h-form-item>

                    <h-form-item label="Single" prop="radioData">
                        <h-radio v-model="data.radioData" :datas="dataParam"></h-radio>
                    </h-form-item>

                    <h-form-item label="Multiple" prop="checkboxData">
                        <h-checkbox v-model="data.checkboxData" :datas="dataParam"></h-checkbox>
                    </h-form-item>

                    <h-form-item label="Fuzzy" prop="autocompleteData">
                        <h-auto-complete v-model="data.autocompleteData" config="simple"></h-auto-complete>
                    </h-form-item>

                    <h-form-item :no-padding="true" single>
                        <h-button color="primary" :loading="isLoading" @click="submit" v-tooltip
                            content="执行异步验证但是不等待结果">提交</h-button>
                        <i class="h-split"></i>
                        <h-button color="green" :loading="isLoading" @click="submitAsync" v-tooltip
                            content="等待所有异步验证都执行完后提交">异步提交</h-button>
                        <i class="h-split"></i>
                        <h-button @click="reset">清除验证</h-button>
                        <h-button @click="resetDatepicker">清除日期的验证</h-button>
                    </h-form-item>
                    
                </h-form>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            mode: 'single',
            data: {
                intData: null,
                numberData: null,
                urlData: null,
                emailData: null,
                telData: null,
                mobileData: null,
                inputData: '',
                textareaData: '测试',
                radioData: 1,
                rateData: null,
                checkboxData: [1],
                select1Data: '人民币',
                select2Data: '',
                select3Data: [],
                taginputsData: [],
                autocompleteData: null,
                money: {
                    minData: null,
                    maxData: null
                },
                dateData: null,
                inputsData: [],
                thingsData: ['']
            },
            dataParam: {
                1: '男',
                2: '女',
                3: '其他'
            },
            param1: ['美金', '人民币', '卢布'],
            isLoading: false,
            modeParam: {
                single: '一个区块一行',
                twocolumn: '两列一行',
                threecolumn: '三列一行',
                block: '标题独立一行'
            },
            isInputAsyncError: false,
            validationRules: {
                rules: {
                    textareaData: {
                        maxLen: 50,
                        minLen: 10
                    },
                    inputData: {
                        // 这里的判断不会影响最终的valid结果，所以也可以作为一些验证提示
                        validAsync(value, next, parent, data) {
                            log(value);
                            setTimeout(() => {
                                if (value == 15) {
                                    next();
                                } else {
                                    next('ID不等于15');
                                }
                            }, 1000);
                        }
                    }
                },
                required: [
                    'autocompleteData',
                    'select2Data',
                    'select3Data',
                    'inputsData[].value',
                    'inputData',
                    'radioData',
                    'rateData',
                    'checkboxData',
                    'moneyData',
                    'dateData',
                    'taginputsData',
                    'money.minData',
                    'money.maxData',
                    'intData',
                    'numberData',
                    'urlData',
                    'emailData',
                    'telData',
                    'mobileData',
                    'textareaData'
                ],
                int: ['intData'],
                number: ['numberData', 'money.minData', 'money.maxData'],
                url: ['urlData'],
                email: ['emailData'],
                tel: ['telData'],
                mobile: ['mobileData'],
                combineRules: [
                    {
                        parentRef: 'money',
                        refs: ['minData', 'maxData'],
                        valid: {
                            valid: 'lessThan',
                            message: '起始金额不能大于结束金额'
                        }
                    }
                ]
            }
        }, methods: {
            submit() {
                let validResult = this.$refs.form.valid();
                if (validResult.result) {
                    this.$Message('验证成功');
                }
            },
            submitAsync() {
                this.isLoading = true;
                this.$refs.form.validAsync().then(result => {
                    if (result.result) {
                        this.$Message('验证成功');
                    }
                    this.isLoading = false;
                });
            },
            open() {
                this.$Modal({
                    title: '处理',
                    content: '我要去做特殊的处理'
                });
            },
            reset() {
                this.isLoading = false;
                this.$refs.form.resetValid();
            },
            resetDatepicker() {
                this.$refs.datapicker.resetValid();
            },
            add() {
                this.data.inputsData.push({ value: '' });
            },
            remove(index) {
                this.data.inputsData.splice(index, 1);
            }
        }
    })
</script>